<template>
	<view class="fortune" :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="tabs flex-r j-c">
			<up-tabs :list="tabList" lineWidth="30" lineColor="#FED523" @click="handleTab"></up-tabs>
			<up-icon class="go-back" size="20" name="arrow-left" @click="goBack" />
		</view>
		<view class="personal flex-r a-c s-b">
			<view class="flex-r a-c">
				<up-avatar size="50" text="北" fontSize="18" randomBgColor></up-avatar>
				<view class="personal-info ml-1 flex-c">
					<view>xxxtz</view>
					<text>1986.12.23 北京市海定区</text>
				</view>
			</view>
			<text class="iconfont icon-qiehuandangan" />
		</view>
		<!-- 流日 -->
		<view v-if="tabIndex === 0">
			<daily />
		</view>
		<!-- 月运 -->
		<view v-if="tabIndex === 1">
			<lunar-cycle />
		</view>
		<!-- 年运 -->
		<view v-if="tabIndex === 2">
			<annual-cycle />
		</view>
		<!-- 周期 -->
		<view v-if="tabIndex === 3">
			<planet-cycle />
		</view>
	</view>
</template>

<script setup>
	import daily from './components/daily.vue'
	import lunarCycle from './components/lunarCycle.vue'
	import annualCycle from './components/annualCycle.vue'
	import planetCycle from './components/planetCycle.vue'
	import {
		ref,
		reactive
	} from 'vue'
	const safeAreaTop = uni.$safeArea?.safeAreaTop - 44;
	const tabList = reactive([{
			name: '流日'
		},
		{
			name: '月运'
		},
		{
			name: '年运'
		},
		{
			name: '周期'
		}
	])
	const tabIndex = ref(0)
	const handleTab = (tab) => {
		tabIndex.value = tab.index
		// console.log(tab);
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	page {
		padding-top: 0;
		background-color: #F9F9F9;
	}

	.fortune {
		background-color: #F9F9F9;
		.tabs {
			position: sticky;
			top: 0;
			background-color: #fff;

			.go-back {
				position: absolute;
				left: 20px;
				top: 16px;
			}
		}

		.personal {
			padding: 60rpx 40rpx 20rpx;
			background-color: #fff;

			.personal-info {

				view {
					font-size: 34rpx;
					font-weight: 600;
					line-height: 48rpx;
				}

				text {
					font-size: 20rpx;
					color: #6F6F6F;
				}
			}
		}
	}
</style>